<template>
  <div>
    <div class="flexRow">
      <div class="width-8 pd-2">
        <el-card class="box-card" shadow="always" body-style="background: #fff1eb;">
          <div slot="header" class="clearfix">
            <span class="card-header">实验要求</span>
            <el-button class="card-header-btn" type="text" @click="isShow = true">编辑</el-button>
          </div>
          <div class="textValue item el-card-text">
            {{ this.$api.toText(textValue) }}
          </div>
        </el-card>
      </div>
      <div class="block width-2 m-t2 timeline">
        <div class="m-t25">
          <el-timeline >
            <el-timeline-item class="m-t1"
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <div class="quill-editor-box" style="">
      <quill-editor v-model="textValue" ref="myQuillEditor" v-show="isShow" class="quill-editor"></quill-editor>
      <el-button class="quill-editor-submit" type="text" v-show="isShow" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ledIntroduce',
    data() {
      return {
        activities: [{
          content: '首次创建文本时间',
          timestamp: '2021/9/12上午10:46:20',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-star-off'
        }, {
          content: '最终提交时间',
          timestamp: '2021/9/12上午10:46:20',
          color: '#0bbd87',
          size: 'large',
          icon: 'el-icon-edit-outline'
        }, {
          content: '当前登录时间',
          timestamp: '2021-09-12 20:46',
          size: 'large',
          color: '#00557f'
        }],
        isShow: false,
        textValue: '用户移动端通过WiFi连接服务器，进而将命令（这里的用户发送的命令简单用u表示）发送给网关。网关将通过串口连接STM32F407单片机板上。如果用户发送的命令u=0，则单片机执行GPIO10设置为高电平，实现灯的灭；如果用户发送的命令u=1，则单片机执行GPIO10设置为低电平，实现灯的亮；用户通过WiFi将命令发送给网关。进而将命发送给令单片机。单片机处理串口获取并读取的数据信息，读取数据状态,,更新数据u，读取GPIO状态d，若u=d，则不会执行，若u≠d，则执行命令。最后读取GPIO口的信息，并将信息返还给串口。'
      }
    },
    methods: {
      submit() {
        this.isShow = false;
        var a = new Date();
        var b = a.toLocaleTimeString();
        var c = a.toLocaleDateString();
        var ledTime = this.activities[1].timestamp;
        ledTime = c + b;
        // 将获取数据存入本地缓存
        localStorage.getItem(ledTime);
        localStorage.setItem("ledTime",ledTime);
        var str = window.localStorage?localStorage.getItem("ledTime"):Cookie.read("ledTime");
        this.activities[1].timestamp = str;
      }
    },
    mounted() {
      var str = window.localStorage?localStorage.getItem("ledTime"):Cookie.read("ledTime");
      this.activities[1].timestamp = str;
      //获取实时时间
      setInterval(() => {
        var a = new Date();
        var b = a.toLocaleTimeString();
        var c = a.toLocaleDateString();
        this.activities[2].timestamp = c + b;
      },1000);
    }
  }
</script>

<style>

</style>
